import './Main.scss'
import React from 'react'
import {connect} from 'react-redux'
import { Route,withRouter } from 'react-router'
import {NavLink} from 'react-router-dom'

import NavHeader from '../../../component/NavHeader/NavHeader.jsx';
import Menu from'../Menu/Menu.jsx'
import Comment from '../Comment/Comment.jsx'
import Restaurant from '../Restaurant/Restaurant.jsx'
class Main extends React.Component {
  constructor(props) {
    super(props)
  }
  changeTab(item) {
    this.props.history.replace(item.key)
  }
  renderTabs(){
    let tabs = this.props.tabs
    return tabs.map((item,index)=>{
      return(
        <NavLink className='tab-item' key={index} to={'/'+item.key} onClick={()=>this.changeTab(item)} replace={true}>{item.name}</NavLink>
      )
    })
  }
  render() {
    let myName = this.props.infoName.poi_info?this.props.infoName.poi_info.name:' ';
    return (
      <div className='detail'>
        <NavHeader title={myName}/>
        <div className='tab-bar'>
          {this.renderTabs()}
        </div>
          <Route exact path='/menu' component={Menu}/>
          <Route path='/comment' component={Comment}/>
          <Route path='/restaurant' component={Restaurant}/>
         {this.props.showChooseContent>0?
          <div className='mask'></div>
           :null
         }
      </div>
    )
  }
}

export default withRouter(
  connect(
    state =>({
      tabs:state.tabReducer.tabs,
      showChooseContent:state.menuReducer.showChooseContent,
      infoName:state.menuReducer.infoName
    })
  )(Main)
)